﻿<template>
  <div class="add_limit_card_cover clearfix">
    <div class="add_limit_header clearfix">
      <img src="../../static/img/new_style_go_back.png" alt="" v-on:touchstart="$goback()">
      选定限定卡
    </div>
    <div class="contain_card">
      <div class="cover_card" v-for="item in list">
        <div class="contain_card_header">
          {{item.d}}
        </div>
        <div class="swiper_cover">
          <md-card>
            <md-card-media>
              <!-- swiper -->
              <swiper :options="swiperOption">
                <swiper-slide>
                  <!--<img :src="s_item.img" alt="" class="swiper_box" style="visibility: show;">-->
                </swiper-slide>
                <swiper-slide v-for="s_item in item.c" >
                  <img :src="s_item.img" alt="" class="swiper_box" style="visibility: show;" v-on:click="mui_goto(s_item.n)">
                </swiper-slide>
                <swiper-slide>
                  <!--<img :src="s_item.img" alt="" class="swiper_box" style="visibility: show;">-->
                </swiper-slide>
                <!--<div class="swiper-pagination" slot="pagination"></div>-->
              </swiper>
            </md-card-media>
          </md-card>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  //limit_Scroll
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import "../filter/filter.js";
  import Vue from 'vue';
  import common from "../common/common.js";
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import Tajax from "../common/common_ajax/common_ajax.js";
  Vue.use(Tajax);

  export default {
    name: 'limit_card',
    data() {
      return {
        list: [
                {
                  d:"星期一",
                  c:[
                    {n:'运动卡' , img:"../../static/img/card/d1/sports_card.png"},
                    {n:"歌唱卡",img:"../../static/img/card/d1/music_card.png"},
                    {n:"美图卡",img:"../../static/img/card/d1/picture_card.png"}
                    ]
                },
                {
                  d:"星期二",
                  c:[
                    {n:"美食卡",img:"../../static/img/card/d2/food_card.png"},
                    {n:"偶遇卡",img:"../../static/img/card/d2/encounter_card.png"},
                    {n:"情绪卡/失恋",img:"../../static/img/card/d2/emotion_card.png"}
                  ]
                },
                {
                  d:"星期三",
                  c:[
                    {n:"读书卡",img:"../../static/img/card/d3/reading_card.png"},
                    {n:"愚人卡",img:"../../static/img/card/d3/fool_card.png"},
                    {n:"信物卡",img:"../../static/img/card/d3/token_card.png"}
                  ]
                },
                {
                  d:"星期四",
                  c:[
                    {n:"宠物卡",img:"../../static/img/card/d4/pet_card.png"},
                    {n:"爱好卡",img:"../../static/img/card/d4/hobby_card.png"},
                    {n:"角色扮演卡",img:"../../static/img/card/d4/role_card.png"}
                  ]
                },
                {
                  d:"星期五",
                  c:[
                    {n:"美图卡",img:"../../static/img/card/d5/picture_card.png"},
                    {n:"诗歌卡",img:"../../static/img/card/d5/poetry.png"},
                    {n:"压力卡",img:"../../static/img/card/d5/lovelorn_card.png"}
                  ]
                },
                {
                  d:"星期六",
                  c:[
                    {n:"联谊卡",img:"../../static/img/card/d6/fellowship_card.png"},
                    {n:"美图卡",img:"../../static/img/card/d6/picture_card.png"},
                    {n:"运动卡",img:"../../static/img/card/d6/sports_card.png"},
                  ]
                },
                {
                  d:"星期天",
                  c:[
                    {n:"偶遇卡",img:"../../static/img/card/d7/encounter_card.png"},
                    {n:"愚人卡",img:"../../static/img/card/d7/fool_card.png"},
                    {n:"美食卡",img:"../../static/img/card/d7/food_card.png"},
                    {n:"运动卡",img:"../../static/img/card/d7/sports_card.png"}
                  ]
                },
              ],
        allLoaded: false,
        bottomStatus: '',
        wrapperHeight: 0,
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        swiperSlides:[1,1,1,1],
        user_id:""
      }
    },
    created:function(){
      localStorage.setItem("limit_card_type","");
      this.user_id = this.get_user_id();
    },
    beforeCreate: function () {

    },
    mounted:function(){
//      setInterval(() => {
//        console.log('simulate async data');
//        if (this.swiperSlides.length < 10) {
//          this.swiperSlides.push(this.swiperSlides.length + 1)
//        }
//      }, 3000)
    },
    methods: {
      mui_goto:function (n) {
        localStorage.setItem("limit_card_type",n);
        console.log("limit_card_type");
        console.log(n);
        console.log(localStorage.getItem("limit_card_type"));
        this.$mui_goto({
          url:'Adventure.html?user_id='+user_id+'#/input_limit_card',
          id:'Adventure.html',
          show:'slide-in-bottom'
        })
      },
      get_data:function () {
        return new Promise((resolve, reject) => {
            let user_id = this.get_user_id();
            Indicator.open();
            this.$tajax({
              url: "/yizhiweimen/api/user/personalHomepage/getIntradayCard",
              m: "post",
              data: qs.stringify(
                {
                  uid:user_id
                })
            }).then((e) => {
              Indicator.close();
              resolve(e.data);
            }).catch((e)=>{
              Indicator.close();
              reject(e)
            })
        })
      }
  },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>
<style scrop lang="scss">
@import "./sass/add_limit_card.scss";
</style>

